import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import { delTodo, toggleTodo, updateTodo } from '../store/actions/todos';

export const TodoItem = ({ id, text, done }) => {
  // hooks
  const dispatch = useDispatch();

  // 状态
  // 是否显示编辑输入框
  const [showEdit, setShowEdit] = useState(false);
  // 输入框dom
  const inputRef = useRef();
  // todo text 作为 TodoItem 组件的状态维护
  const [todoName, setTodoName] = useState(text);

  // 肯定是在页面刷新后执行
  useEffect(() => {
    // showEdit 变化的时候，和首次加载的时候都要执行
    console.log('======');
    if (showEdit) {
      inputRef.current.focus();
    }
    // 只在 showEdit 变化的时候执行 useEffect。
    // 因为默认 useEffect 会在页面的任意一个状态变化时执行
  }, [showEdit]);

  // 事件处理函数
  const delHandler = (id) => {
    console.log(id);
    // const action = delTodo(id);
    // console.log('delete action', action);
    // dispatch(action);
    dispatch(delTodo(id));
  };
  // 切换任务完成状态
  const handleTodoToggle = (id) => {
    console.log('发送 action 给 reducer');
    const actionObj = toggleTodo(id);
    // action obj 有type属性，要干啥，payload属性，要修改谁
    console.log('dispath 分发的', actionObj);
    dispatch(toggleTodo(id));
  };

  // 回车修改todo事件处理
  const onUpdateTodo = (e, id) => {
    if (e.keyCode !== 13) return;
    if (!todoName.trim()) return;

    console.log('fa action');
    dispatch(updateTodo(id, todoName));

    // 隐藏输入框
    setShowEdit(false);
  };

  return (
    // 编辑时，添加类名：editing
    // <li className={`${done ? 'completed' : ''} ${showEdit ? 'editing' : ''}`}>
    <li className={classNames({ completed: done, editing: showEdit })}>
      <div className="view">
        <input
          className="toggle"
          type="checkbox"
          checked={done}
          onChange={() => handleTodoToggle(id)}
        />
        <label
          onDoubleClick={() => {
            setShowEdit(true);
            // 这种方式不行，类比vue 需要一个nextTick 待定：比喻貌似不准确
            // console.log(inputRef.current);
            // inputRef.current.focus();
          }}
        >
          {text}
        </label>
        {/* <button className="destroy" onClick={() => delHandler(id)}></button> */}
        {/* 写法和上面的写法是等价的 */}
        <button
          className="destroy"
          onClick={() => dispatch(delTodo(id))}
        ></button>
      </div>
      <input
        className="edit"
        ref={inputRef}
        value={todoName}
        onChange={(e) => setTodoName(e.target.value)}
        onBlur={() => setShowEdit(false)}
        onKeyDown={(e) => onUpdateTodo(e, id)}
      />
    </li>
  );
};

// export const TodoItem = (props) => {
//   console.log(props);
//   return (
//     // 编辑时，添加类名：editing
//     <li className={props.done ? 'completed' : ''}>
//       <div className="view">
//         <input className="toggle" type="checkbox" />
//         <label>{props.text}</label>
//         <button className="destroy"></button>
//       </div>
//       <input className="edit" />
//     </li>
//   );
// };
